<!DOCTYPE html>
<html>
<head>
    <title>Image Browser</title>
    <style>
        .thumbnail-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 20px; /* Increased gap for better spacing */
            padding: 20px; /* Added padding around the grid */
        }
        .thumbnail-item {
            display: flex; /* Use flexbox for alignment */
            flex-direction: column; /* Stack image and text */
            align-items: center; /* Center items horizontally */
            text-align: center;
            border: 1px solid #ddd; /* Added border */
            border-radius: 5px; /* Optional: rounded corners */
            padding: 10px;
        }
        .thumbnail-link {
            display: block; /* Make the link take up the full width */
            margin-bottom: 5px; /* Space between image and text */
        }
        .thumbnail {
            max-width: 100%; /* Make image responsive within its container */
            height: auto;
            max-height: 100px;
            cursor: pointer;
            object-fit: contain; /* Ensure the entire image fits within the bounds */
        }
        .image-name {
            word-break: break-word; /* Prevent long names from breaking layout */
            font-size: 0.9em; /* Slightly smaller font for names */
            margin-bottom: 5px;
        }
        .delete-form {
            margin-top: 10px; /* Space above the delete button */
        }
        button {
            padding: 5px 10px;
            cursor: pointer;
            border: 1px solid #ccc;
            border-radius: 3px;
            background-color: #f44336; /* Red color for delete button */
            color: white;
        }
        button:hover {
            background-color: #d32f2f;
        }
        input[type="text"] {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
            margin-right: 5px;
        }
        button[type="submit"] {
            padding: 8px 12px;
            border: 1px solid #4CAF50;
            border-radius: 3px;
            background-color: #4CAF50; /* Green color for search button */
            color: white;
        }
        button[type="submit"]:hover {
            background-color: #45a049;
        }
        h1, h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        hr {
            margin: 20px 0;
            border: 0;
            border-top: 1px solid #eee;
        }
        body {
            font-family: sans-serif;
            margin: 0;
            background-color: #f8f8f8;
        }
    </style>
</head>
<body>
    <h1>Image Library</h1>

    <form action="/search" method="post" style="text-align: center; margin-bottom: 20px;">
        <label for="query">Search by name:</label>
        <input type="text" id="query" name="query">
        <button type="submit">Search</button>
    </form>

    <hr>

    <h2>All Images</h2>
    <div class="thumbnail-grid">
        {% for image in images %}
        <div class="thumbnail-item">
            <a href="/pic_small/{{ image }}" class="thumbnail-link">
                <img src="{{ thumbnails[image] }}" alt="{{ image }}" class="thumbnail">
            </a>
            <p class="image-name">{{ image }}</p>
            <form action="/delete/{{ image }}" method="post" class="delete-form">
                <button type="submit" onclick="return confirm('Are you sure you want to delete {{ image }}?')">Delete</button>
            </form>
        </div>
        {% endfor %}
    </div>
</body>
</html>